<template>
	<view class="rankingList">
		<u-navbar
			title=""
			bgColor="transparent"
			leftIconColor="#fff"
			@leftClick="back"
		>
		</u-navbar>
		<view class="bg">
			<!-- <image src="@/static/images/ranking_bg.png" mode=""></image> -->
		</view>
		<view class="container">
			<u-tabs :list="tabs"  activeStyle="font-size: 32rpx;color: #1F2037;font-weight: 600;" lineColor="#000" @change="changeTab"></u-tabs>
			<view v-if="current===0" class="content">
				<view class="top">
					<text>排行</text>
					<text>用户昵称</text>
					<text>有效人数</text>
					<text>总人数</text>
				</view>
				<view class="box">
					<view class="item" v-for="(item,index) in list" :key="index">
						<text class="rank" v-if="index + 1 === 1">
							<image src="@/static/ico/no1.png" mode=""></image>
						</text>
						<text class="rank" v-if="index + 1 === 2">
							<image src="@/static/ico/no2.png" mode=""></image>
						</text>
						<text class="rank" v-if="index + 1 === 3">
							<image src="@/static/ico/no3.png" mode=""></image>
						</text>
						<text class="rank" v-if="index + 1 > 3">{{index+1}}</text>
						<text>{{item.nickname}}</text>
						<text>{{item.pay_num}}</text>
						<text>{{item.total}}</text>
					</view>
				</view>
			</view>
			<view v-if="current===1" class="content">
				<view class="top">
					<text>用户昵称</text>
					<text>手机号</text>
					<text>注册时间</text>
				</view>
				<view class="box">
					<view v-if="totals > 0">
						<view v-for="(item, index) in lists" :key="index" class="item">
							<text>{{item.nickname}}</text>
							<text>{{item.mobile}}</text>
							<text>{{item.create_time|format}}</text>
						</view>
					</view>
					<view v-else class="empty">
						<image src="@/static/images/top_empty.png" mode=""></image>
						<view class="text">暂无数据，快去邀请好友加入吧~</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	import moment from 'moment'
	export default {
		mixins: [mixin],
		data() {
			return {
				tabs: [
					{name: '邀请排行'},
					{name: '邀请记录'}
				],
				current: 0,
				page: 1,
				list: [],
				lists: [],
				total: 0,
				totals: 0
			}
		},
		filters: {
			format (v) {
				return moment(v).format('YYYY-MM-DD')
			}
		},
		onShow() {
			this.getTopList()
		},
		onReachBottom() {
			if (this.current === 0 && this.list.length < this.total) {
				this.page += 1
				this.getTopList()
			} else if (this.lists.length < this.totals) {
				this.page += 1
				this.getTopList()
			}
		},
		methods: {
			changeTab (e) {
				this.current = e.index
				this.getTopList()
			},
			async getTopList () {
				let res = await this.$http({
					url: this.current === 0 ? this.$api.getInviteTopList : this.$api.getInviteUserList,
					method: 'POST',
					hideLoading: true,
					data: {
						page_size: 2000,
						page: this.page,
					}
				})
				this.loading = false
				if (this.page == 1) {
					if (this.current === 0) {
						this.list = []
					} else {
						this.lists = []
					}
				}
				if (res.code == 200) {
				
					if (this.current === 0) {
						this.list = this.list.concat(res.data.data)
						this.total = res.data.total
					}
					if (this.current === 1) {
						this.lists = this.lists.concat(res.data.data)
						this.totals = res.data.total
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.rankingList {
	height: 100vh;
	.bg {
		width: 750rpx;
		height: 392rpx;
		background: url(@/static/images/ranking_bg.png) no-repeat;
		background-size: 100% 100%;
	}
	.container {
		width: 750rpx;
		height: 100%;
		background: #FBFBFF;
		margin-top: -40rpx;
		border-radius: 28rpx 28rpx 0px 0px;
		padding-top: 20rpx;
		.content {
			padding: 0 30rpx;
			.top {
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 690rpx;
				height: 92rpx;
				background: linear-gradient(237deg, #FFFFFF 0%, #FFFFFF 100%);
				box-shadow: 0px 4rpx 8rpx 0px rgba(0,0,0,0.05);
				border-radius: 8rpx;
				margin: 24rpx auto;
				color: #8C93AA;
				font-size: 26rpx;
			}
			.box {
				margin-top: 48rpx;
				.item {
					display: flex;
					justify-content: space-around;
					align-items: center;
					font-weight: 400;
					color: #1F2037;
					font-size: 24rpx;
					padding: 20rpx 0;
					.rank {
						font-size: 32rpx;
						font-weight: bold;
						color: #1F2037;
						image {
							width: 36rpx;
							height: 44rpx;
						}
					}
				}
				.empty {
					// display: flex;
					// align-items: center;
					// justify-content: center;
					// flex-direction: column;
					width: 286rpx;
					height: 306rpx;
					margin: 200rpx auto;
					image {
						width: 100%;
						height: 100%;
					}
					.text {
						width: 378rpx;
						font-size: 26rpx;
						color: #8C93AA;
						margin-left: -50rpx;
					}
				}
			}
			&:last-child {
				.top {
					display: flex;
					align-items: center;
					justify-content: space-around;
					text {
						width: 33%;
						text-align: center;
					}
				}
				.item {
					text {
						width: 33%;
						text-align: center;
					}
				}
			}
		}
	}
}
</style>
